<template>
	<view class="myPoint-content">
		<view class="myPoint-content-page">
			<view class="myPoint-content-total">
				<view class="total-top">
					<view class="total-top-info">
						<uni-icons type="info" size="23" color="#ead5ff"></uni-icons>
						<view>积分说明</view>
						
					</view>
					<view class="total-top-point">
						<view class="point" >
							19300
							
						</view>
						<view class="text">
							当前积分
						</view>
						
					</view>
				</view>
			<view class="myPoint-content-feature">
				<view class="feature-left" @click="passOnPoint">
					<view class="featur-left-image">
						<image src="/static/images/imgIcons/转送.svg" mode=""></image>		
					</view>
					<view class="pass-on">
						转送积分
					</view>
				</view>
				<view class="feature-right" @click="clickQRcode">
					<view class="featur-right-image">
						<image src="/static/images/imgIcons/二维码.svg" mode=""></image>
					
					</view>
					<view class="QR-code">
							会员码
					</view>
				</view>
			</view>
			</view>
			<view class="point-info-content">
				<template v-for="item in pointList" :key="item">
					<view class="point-info-content-item">
						<view class="item-title" :class="{active:item.type===1}">
							{{item.type===1?'收入':'支出'}}
						</view>
						<view class="item-pointId">
							编号：{{item.pointId}}
						</view>
						<view class="item-pointId">
							时间：{{item.dataInfo}}
						</view>
						<view class="item-remarks">
							备注：{{item.remarks}}
						</view>
						<view class="point-num">
							{{item.type===1?'+':'-'}}{{item.num}}
						</view>
					</view>
					
				</template>
			</view>
		</view>
		<uni-popup ref="passPoint" type="center" background-color="#fff" class="pointPoP" >
			
			
			<view class="passForm">
				<template v-if="toastPoP">
					
				<view class="formData">
				<uni-forms ref="baseForm" :modelValue="alignmentFormData" label-position="top">
					
					<uni-forms-item label="用户ID" required >
					<uni-easyinput v-model="passOn.clientId" placeholder="请输入用户ID" />
					</uni-forms-item>
					<uni-forms-item label="赠送积分" required label-width="100px">
					<uni-easyinput v-model="passOn.point" placeholder="请输入赠送积分数" />
					</uni-forms-item>
					</uni-forms>
					</view>
					
					<view class="option-button">
						
						<view class="button-left" @click="submitClick">
							确认
						</view>
						<view class="button-right" @click="cancelClick">
							取消
						</view>
					</view>
					</template>
					<template v-else>
						<view class="Code-top">
							
						
						<view class="memeberImage">
							<image src="/static/images/code.jpg" mode="aspectFill"></image>
						</view>
						<view class="text">
							向商家出示二维码核销
							
							
						</view>
						</view>
						<view class="Code-bottom" @click="closeClick">
							关闭
						</view>
					</template>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { computed,reactive,ref } from 'vue';
const pointList=ref([{
	type:1,
	pointId:'928e09319093',
	dataInfo:'2025-07-28',
	remarks:'签到奖励',
	sign:1,
	num:200
},{
	type:0,
	pointId:'928e09319093',
	dataInfo:'2025-07-28',
	remarks:'转送机房',
	sign:1,
	num:200
},{
	type:1,
	pointId:'928e09319093',
	dataInfo:'2025-07-28',
	remarks:'签到奖励',
	sign:1,
	num:200
},{
	type:0,
	pointId:'928e09319093',
	dataInfo:'2025-07-28',
	remarks:'转送积分',
	sign:1,
	num:200
},])
//赠送积分
	const passPoint=ref()
	
	function passOnPoint(){
		toastPoP.value=true
		passPoint.value.open()
	}
	
const passOn=reactive({
	clientId:'',
	point:0
})

const toastPoP=ref(true)
//确认赠送积分
function submitClick(){
	
	
	passPoint.value.close()
}
function cancelClick()
{
	passPoint.value.close()
}

function clickQRcode()
{
	toastPoP.value=false
	passPoint.value.open()
}

function closeClick(){
	passPoint.value.close()
}
</script>

<style lang="scss" scoped>
	 .myPoint-content-page{
		 width: 100%;
		 height: 100vh;
		 box-sizing: border-box;
		 padding: 30rpx 32rpx;
		 display: flex;
		 flex-direction: column;
		 gap: 58rpx;
	
	
		 .myPoint-content-total{
			 width: 100%;
			 height:320rpx;
			 background-color: #fff;
			 	box-shadow:0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 15px -5px rgba(0,0,0,0.4);
				border-radius: 10rpx;
				overflow: hidden;
			 .total-top{
				 height: 218rpx;
				 background-color: lightpink;
				 color:rgba(255, 255, 255, 1);
				  padding: 10rpx 10rpx;
				 .total-top-info{
					 display: flex;
					 align-items: center;
					 height: 42rpx;
					 line-height: 42rpx;
					 font-size:24rpx;
					 gap: 10rpx;
					 
					 
				 }
				 .total-top-point{
					 text-align: center;
					 .point{
						 font-size: 64rpx;
					 }
					 .text{
						 font-size: 24rpx;
					 }
					 
					 
				 }
			 }
		 .myPoint-content-feature{
			 width: 100%;
			 
			 height:92rpx ;
			 display: flex;
			  justify-content: center;
			 align-items: center;
			 position: relative;
			
			 .feature-left,.feature-right{
				 width: 152rpx;
				 height: 32rpx;
				 flex: 1;
				 display: flex;
				 justify-content: center;
				 gap: 10rpx;
				align-items: center;
				 .featur-left-image,.featur-right-image{
					 width: 32rpx;
					 height: 32rpx;
				 }
				 image{
					 width: 32rpx;
					 height: 32rpx;
				 }
				
			 }
			 &::after{
			 	content: "";
			 	display: block;
			 	position: absolute;
			 	left: 50%;
			 	top: 15%;
				
			 	width: 2rpx;
			 	height: 58rpx;
			 	background-color: pink;
			 }
			
		 }
		 }
		 .point-info-content{
			 width: 100%;
			
			 overflow: hidden;
			
			 min-height: 228rpx;
			 .point-info-content-item{
				 padding: 26rpx 26rpx;
				 padding-bottom:0rpx ;
				
				 box-sizing: border-box;
				 width: 100%;
				 height: 218rpx;
				 position: relative;
				 border-bottom: 1px solid rgba(239, 239, 239, 1);
				 color: rgba(102, 102, 102, 1);
				 font-size: 24rpx;
				 .item-title{
					 font-size: 36rpx;
					  color: rgba(255, 141, 26, 1);
					  padding-bottom: 10rpx;
				 }
				
				 .active{
					 color: rgba(255, 0, 0, 1.0);
				 }
				 .point-num{
					 font-size: 36rpx;
					 position: absolute;
					 right: 20rpx;
					 top: 30rpx;
				 }
				 
			 }
		 }
		
	 	
	 }  
		 .passForm{
		 			 width: 612rpx;
		 			 height: 464rpx;
		 			 background-color: #fff;
					 border-radius: 15rpx;
					 overflow: hidden;
					 position: relative;
					 display: flex;
					 flex-direction: column;
					 justify-content: center;
					 align-items: center;
		 			 z-index: 100;
					 padding: 50rpx 50rpx;
					 padding-bottom: 0rpx;
					 :deep(.uni-forms-item__label){
						 
						 font-size: 32rpx;
					 }
					 :deep(.uni-easyinput__content){
						 height: 68rpx;
					 }
					 
					 .option-button{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 width: 100%;
						 border-top: 1px solid rgba(228, 228, 228, 1);
						 height: 116rpx;
						 
						
						 .button-left,.button-right{
							 flex: 1;
							 text-align: center;
							 line-height: 116rpx;
							 font-size: 36rpx;	 
							color: rgba(153, 153, 153, 1);
							 
						 }
						 .button-left{
							 border-right: 1px solid rgba(228, 228, 228, 1);
							 color: rgba(20, 125, 226, 1);
						 }
						
						
					 }
					 .Code-top{
						 width:100%;
						 height: 448rpx;
						 display: flex;
						 flex-direction: column;
						 justify-content: center;
						 align-items: center;
						 font-size: 28rpx;
						 color: rgba(187, 187, 187, 1);
					 }
					 .memeberImage{
						 width: 204rpx;
						 height: 204rpx;
						 image{
							 width: 100%;
							 height: 100%;
						 }
										  }
					.Code-bottom{
						width: 100%;
						height: 118rpx;
						border-top: 1px solid rgba(228, 228, 228, 1);
						text-align: center;
						line-height: 118rpx;
						font-size: 36rpx;
						color: rgba(102, 102, 102, 1);
						
					}
					 
					 }
</style>
